<div class="row mb-3">
    {% for translation_form_key, translation_form in hookable_metadata.context.value_form.translations %}
        <div class="col-3" {{ sylius_test_html_attribute('option-value-locale', translation_form_key) }}>
            <div>
                {% if translation_form.vars.name is not null %}
                    <div class="d-flex">
                        <div class="me-3 mt-1">{{ form_label(translation_form, translation_form.vars.name|sylius_locale_name) }}</div>
                    </div>
                {% else %}
                    <div class="d-flex">
                        <div class="me-3 mt-1">
                            <span class="col-form-label">{{ 'sylius.ui.global'|trans }}</span>
                        </div>
                    </div>
                {% endif %}
            </div>
            <div>
                <div class="input-group">
                    {{ form_widget(translation_form.value) }}
                    <button
                        type="button"
                        class="btn btn-icon"
                        data-bs-toggle="tooltip"
                        data-bs-title="{{ 'sylius.ui.apply_to_all'|trans }}"
                        data-action="live#action:prevent"
                        data-live-action-param="applyToAll"
                        data-live-value-key-param="{{ hookable_metadata.context.value_form_key }}"
                        data-live-translation-key-param="{{ translation_form_key }}"
                        {{ sylius_test_html_attribute('apply-to-all') }}
                    >
                        {{ ux_icon('tabler:copy-plus') }}
                    </button>
                    {{ form_errors(translation_form.value) }}
                </div>
            </div>
        </div>
    {% endfor %}
</div>
